import React, { useEffect, useRef, useState } from "react";
import { ActivityIndicator, Dimensions, FlatList, ScrollView, StatusBar, StyleSheet, Text, View } from "react-native";
import CheckButton from "./CheckButton";

import Colors from "../../util/Colors";
import Toast from 'react-native-easy-toast';
import PlayListItem from "../PlayListItem/PlayListItem";
import PlayListItem2Col from "./PlayListItem2Col";

export default function(props){
  let isLoading = props.loading;
  let data = props.songs || props.lists;
  const toast = useRef(null);

  const _onItemPress = item => {
    //console.log('_onItemPressed: ' + JSON.stringify(item));
    if(props.isPlayList){
      props.navigation.navigate('ListDetail',{item:{...item,isAlbum:false}});
    }else if(props.isAlbum){
      //console.log('_onItemPressed album: ' + item);
      props.navigation.navigate('ListDetail',{item:{...item,isAlbum:true}});
    }
    //this.toast.show(item.name);
    // this.props.navigation.navigate('PlayListDetail', {playList: item});
  };

  const _renderItem = ({ index,item }) => {
    if (props.more && index === data.length - 1) {
      return(
        <>
          <PlayListItem2Col item={item} onPress={_onItemPress} />
          <PlayListItem2Col item={{name:'点击加载更多...',img:''}} onPress={props.onMore} />

        </>
      )
    }else {
      return(
      <PlayListItem2Col item={item} onPress={_onItemPress} />
      )
    }
  };
  return(

    <View style={{ flex: 1 }}>
      {
        isLoading ?
          <View style={{ flex: 1, justifyContent: 'center' }}>
            <ActivityIndicator size={46} color={'green'} animating={true} />
          </View>
          :
          <FlatList
            data={data}
            renderItem={_renderItem}
            keyExtractor={(item, index) => index.toString()}
            />
      }
      <Toast ref={toast}
             position='center'
             style={{ backgroundColor: Colors.colorPrimary }}
      />
    </View>

  )



}

const {height, width} = Dimensions.get('window');
const itemPadding = 10;
const styles = StyleSheet.create({
  tabView: {
    flex: 1,
    backgroundColor: Colors.pageBg,
    marginTop: StatusBar.currentHeight,
  },
})
